<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="/css/pintuer.css">


    <link rel="stylesheet" href="/css/admin.css">
    <script type="text/javascript" src="/js/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="/js/layer/layer.js"></script>


    <script type="text/javascript" src="/layui/layui.js"></script>

    <script type="text/javascript" src="/js/vue.js"></script>
</head>
<body>
<div class="panel admin-panel" id="app">
    <div class="panel-head" id="add">
        <strong><span class="icon-pencil-square-o"></span>新增材料表</strong>
    </div>

    <div class="body-content">
        <form id="form" class="form-x">
            <div class="form-group">
                <div class="label">
                    <label>项目id：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" value="" name="conf" id="designProjectId"/>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>材料类别：</label>
                </div>
                <select class="input" id="materialCategory" @change="changeCategory()"
                        style="width: 200px; line-height: 17px;">
                    <!--						<option value=0 >请选择审核状态</option>-->
                    <!--						<option value=1>已审核</option>-->
                    <option >全部</option>
                    <option v-for="item in materials" :value="item.materialCategory" v-text="item.materialCategory" ></option>
                </select>
            </div>

            <div class="form-group">
                <div class="label">
                    <label>材料名称：</label>
                </div>
                <select class="input" id="materialName" @change="changeName()"
                        style="width: 200px; line-height: 17px;">
                    <!--						<option value=0 >请选择审核状态</option>-->
                    <!--						<option value=1>已审核</option>-->
                    <option>全部</option>
                    <option v-if="materialNames!=null" v-for="item in materialNames" :value="item.materialName" v-text="item.materialName"></option>
                </select>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>材料型号：</label>
                </div>
                <select class="input" id="materialModel"  @change="changeModel()"
                        style="width: 200px; line-height: 17px;">
                    <!--						<option value=0 >请选择审核状态</option>-->
                    <!--						<option value=1>已审核</option>-->
                    <option>全部</option>
                    <option v-for="item in materialModels" :value="item.materialId" v-text="item.materialModel"></option>
                </select>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>出货状态：</label>
                </div>
                <select class="input" id="designStatus"
                        style="width: 200px; line-height: 17px;">
                    <!--						<option value=0 >请选择审核状态</option>-->
                    <!--						<option value=1>已审核</option>-->
                    <option value=2>未出货</option>
                </select>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>所需数量：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" value="" name="conf" id="designQuantity"/>
                </div>
            </div>
<div style="margin-left: 100px" id="layer"   ><img v-if="materialPic!=null" :src="materialPic.materialImgUrl"  width="200px"  ></div>
           <br><br> <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <button class="button bg-main icon-check-square-o" type="button" onclick="insertAccount()">
                        提交
                    </button>

                </div>
            </div>

        </form>
    </div>
</div>
</body>

<script type="text/javascript">


     var _this;
     var app=new Vue({
     	el:"#app",
     	data:{
            materials:null,
            materialNames:[],
            materialModels:[],
            materialPic:null,
     		//定义查询条件对象

     	},
     	created:function(){
     		_this=this;
     		this.selectByExample();
     	},
     	methods:{
     		//查询部门信息
     		selectByExample:function(){
     			//_this=this;
     			$.ajax({
     				url:"/materials/selectAll",
     				type:"get",
     				dataType:"json",
     				success:function(data){
     					_this.materials=data.list;
     				}
     			})
     		},changeCategory:function () {
                $.ajax({
                    url:"/materials/changeCategory",
                    type:"get",
                    dataType: "json",
                    data:{materialCategory:$("#materialCategory").val()},
                    success:function (data) {
                        _this.materialNames=data.list;
                    },error:function () {
                        alert("错误");
                    }
                })
            },changeName:function () {
                $.ajax({
                    url:"/materials/changeName",
                    type:"get",
                    dataType: "json",
                    data:{materialName:$("#materialName").val()},
                    success:function (data) {
                        _this.materialModels=data.list;
                    },error:function () {
                        alert("错误");
                    }
                })
            },changeModel:function () {
                $.ajax({
                    url:"/materials/changeModel",
                    type:"get",
                    dataType: "json",
                    data:{materialId:$("#materialModel").val()},
                    success:function (data) {
                        _this.materialPic=data.obj;
                    },error:function () {
                        alert("错误");
                    }
                })
            }

     	}
     });

     var date1 = new Date();
     var date2 = new Date();
    function insertAccount() {

        var data = {
            designProjectId: $("#designProjectId").val(),
            designMaterialsId: $("#materialModel").val(),
            designQuantity: $("#designQuantity").val(),
            designStatus: $("#designStatus").val(),
        };

        date1 = date2;
        date2 = new Date();
        if ((date2.getTime() - date1.getTime()) < 5000) {
            alert("请不要重复提交")
        } else {


            $.ajax({
                url: "/materials/insert",
                type: "post",
                data: data,
                dataType: "json",

                success: function (data) {

                    if (confirm("新增成功，继续添加吗？")) {
                        location.reload();
                    } else {
                        location.href = "materials.html";
                    }
                },
                error: function (error) {
                    alert("新增失败");
                }
            })
        }
    };
    // function look() {
    //     layer.open({
    //         type: 1,
    //         title: false,
    //         closeBtn: 0,
    //         area: ['500px', '300px'],
    //         skin: 'layui-layer-nobg', //没有背景色
    //         shadeClose: true,
    //         content: $('#layer')
    //     });
    // }


</script>
</html>